<template>
    <div id="app">
        <p  class="title">秒杀课程</p>
        <ul id="courses">
            <li v-for="course in courses">
                <p>{{course.courseName}}</p>
                <div><img class="course-img" :src="course.pic" :title="course.title"></div>
                <div>原价:<span style="text-decoration: line-through">{{course.price}}</span></div>
                <div>打折价:<span>{{course.costPrice}}</span></div>
                <div>还剩:<span>{{course.stockCount}}</span></div>
                <div>开始:<span>{{course.startTime|dateFormat}}</span></div>
                <div>结束:<span>{{course.endTime|dateFormat}}</span></div>
                <div>
                    <button :disabled="!course.start" @click="addSeckillOrder(course.id)">
                    {{course.leftSeconds > 0?'还剩'+course.leftSeconds+'秒':'开始抢'}}
                    </button>
                    <button @click="addSeckillOrder(course.id)">test</button>
                </div>
            </li>
        </ul>
        <span style="display: none">{{num}}</span>
    </div>
</template>

<script>
    export default {
        name: "SeckillCourse",
        data(){
            return {
                courses:[], //秒杀的所有课程
                timer:null,
                num:0,
                msg:""
            }
        },
        methods:{
            countdownSeckillSeconds(){
                this.timer = setInterval(() => {
                    this.num++;
                    let now = new Date();
                    for(let i = 0;i < this.courses.length;i++){
                        let start = this.moment(this.courses[i].startTime);
                        this.courses[i].leftSeconds = start.diff(now,'seconds');
                    }
                },1000);
            },
            timeReplace(date){
                date = date.replace('T',' ');
                date = date.substr(0,date.indexOf('.'));
                return date;
            },
            addSeckillOrder(id){
               this.msg ='正在下单';
               //获取随机数
               this.axios.get("/seckill/getToken").then(res => {
                   var random= res.data;
                   this.axios.get("/seckill/order?id="+id+"&random="+random).then(result => {
                       this.msg = result.data;
                   });
               }).catch(reason => {
                   console.log(reason);
                   if(reason.response.status == 401)
                    location.href = "http://localhost:9000/oauth/toLogin";
               })
            }
        },
        created() {
            //加载秒杀课程
            this.axios.get("/seckill/courses").then(res => {
                if(res.data){
                    this.courses = res.data;
                    for(let i = 0;i < this.courses.length;i++){
                        //先禁用所有课程的抢购按钮
                        this.courses[i].start = false;
                        this.courses[i].leftSeconds = 9999999;
                        this.courses[i].startTime = this.timeReplace(this.courses[i].startTime);
                        this.courses[i].endTime = this.timeReplace(this.courses[i].endTime);
                    }
                    this.countdownSeckillSeconds();
                }
            });
        },
        beforeDestroy() {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
</script>

<style scoped>
    #courses{
        list-style: none;
    }
    #courses li{
        width: 230px;
        margin:3px;
        padding: 2px;
        border:1px #ccc solid;
    }
    #courses p{
        height: 18px;
        line-height: 18px;
    }
    #courses div{
        color: #999;
        font-size: 14px;
    }
    .course-img{
        width: 120px;
        height: 160px;
    }
</style>
